<!--
 * @Description: 生成二维码
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-12 15:53:07
 * @FilePath: /yuxiuproweb/src/views/material/inventory/mods/QRCode.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    v-dialogDrag
    title="二维码"
    :visible.sync="shows"
    width="600px"
    append-to-body
  >
    <div id="print">
      <div class="text">条码：{{ data.inventoryCode }}</div>
      <div class="text">供应商：{{ data.supplier }}</div>
      <div class="text">型号：{{ data.frbaicName }}</div>
      <div class="text">规格型号：{{ data.specification }}</div>
      <div class="text" style="margin-top: 20px">
        批号：{{ data.batchNumber }}
      </div>
      <div class="text">米数：{{ data.availableQuantity }}</div>
      <div class="text">门幅：{{ data.width }}</div>
      <div class="text">日期：{{ data.updateTime }}</div>
      <div class="text">人员：{{ data.updateBy }}</div>
      <div class="text">
        验布状态：{{
          data.inspectionStatus === "0"
            ? "未验货"
            : data.inspectionStatus === "1"
            ? "已验货"
            : data.inspectionStatus === "2"
            ? "退货"
            : ""
        }}
      </div>
      <div id="qrcode" ref="qrcode" style="margin-top: 10px"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitCodeForm(data)"
        >条 码 打 印
      </el-button>
      <el-button type="success" @click="submitForm()"> 打 印 </el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Qrcode from "qrcodejs2";
import printJS from "print-js";
import { getLodop, loadCLodop } from "@/utils/LodopFuncs";
export default {
  dicts: ["pro_order_state"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.$nextTick(() => {
      new Qrcode(this.$refs.qrcode, {
        text: this.data.fabricInventoryId,
        width: 80,
        height: 80,
        colorDark: "#333",
        colorLight: "#fff",
        correctLevel: Qrcode.CorrectLevel.L,
      });
    });
  },
  mounted() {
    loadCLodop();
  },
  methods: {
    /** 保存按钮 */
    async submitForm() {
      try {
        this.printHtml();
      } catch (e) {
        console.log(e);
      }
    },
    submitCodeForm(row) {
      console.log(row, "data");
      const LODOP = getLodop();
      if (!LODOP) return;

      let formattedData = [
        `卷号: ${row.oid}`,
        `${!!row.supplier ? "供应商:" + row.supplier : null}`,
        `型号: ${row.frbaicName}`,
        `批号: ${row.batchNumber}`,
        `米数: ${row.inventoryQuantity}`,
        `日期: ${row.createdTime}`,
        `${!!row.doorwidth ? "门幅:" + row.doorwidth : "null"}`,
        `${!!row.status ? "工艺:" + row.status : "null"}`,
        `${!!row.iswaterproof ? "防水:" + row.iswaterproof : "null"}`,
        `${!!row.leftempty ? "左空:" + row.leftempty : "null"}`,
        `${!!row.rightempty ? "右空:" + row.rightempty : "null"}`,
        `${!!row.flowertoflower ? "花到花:" + row.flowertoflower : "null"}`,
        `${!!row.notespc ? "备注:" + row.notespc : "null"}`,
      ];
      LODOP.PRINT_INIT("标签打印");
      LODOP.SET_PRINT_PAGESIZE(1, "50mm", "60mm", "");
      let top = 2;
      formattedData.forEach((text) => {
        console.log(text, text == "null");
        if (text == "null") {
        } else {
          LODOP.ADD_PRINT_TEXT(top + "mm", "0", "50mm", "0", text);
          LODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
          LODOP.SET_PRINT_STYLEA(0, "FontColor", "#000000");
          LODOP.SET_PRINT_STYLEA(0, "FontName", "Arial");
          LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
          top += 5;
        }
      });

      LODOP.ADD_PRINT_BARCODE(
        "37mm",
        "25mm",
        "24mm",
        "25mm",
        "QRCode",
        row.oid //卷号
      );
      LODOP.PREVIEW();
    },
    printHtml() {
      const style =
        "@page { margin: 10px } @media print { #qrcode { width: 200px; height: 200px;} .text { font-size: 15px; }}";
      printJS({
        printable: "print",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          //   this.shows = false;
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.text {
  font-size: 15px;
}
#qrcode {
  width: 80px;
  height: 80px;
  //   position: relative;
  //   left: 50%;
  //   transform: translateX(-50%);
}
</style>
